<template>
  <div class="manager-box">
    <div class="box">
      <h3>左侧选项</h3>
      <select multiple v-model="leftSelected">
        <option v-for="item in leftOptions" :key="item.id" :value="item">{{ item.name }}</option>
      </select>
    </div>

    <div class="buttons">
      <button @click="moveToRight">&gt;&gt;</button>
      <button @click="moveToLeft">&lt;&lt;</button>
    </div>

    <div class="box">
      <h3>右侧选项</h3>
      <select multiple v-model="rightSelected">
        <option v-for="item in rightOptions" :key="item.id" :value="item">{{ item.name }}</option>
      </select>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ManagerBox', // 组件名称
  data() {
    return {
      leftOptions: [],
      rightOptions: [],
      leftSelected: [],
      rightSelected: []
    };
  },
  created() {
    this.fetchLeftOptions();
  },
  methods: {
    async fetchLeftOptions() {
      try {
        const response = await axios.get('/user/user/lists?groupId=3');
        this.leftOptions = response.data;
      } catch (error) {
        console.error('加载数据失败:', error);
      }
    },
    moveToRight() {
      this.rightOptions = this.rightOptions.concat(this.leftSelected);
      this.leftOptions = this.leftOptions.filter(item => !this.leftSelected.includes(item));
      this.leftSelected = [];
    },
    moveToLeft() {
      this.leftOptions = this.leftOptions.concat(this.rightSelected);
      this.rightOptions = this.rightOptions.filter(item => !this.rightSelected.includes(item));
      this.rightSelected = [];
    }
  }
};
</script>

<style>
.transfer-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 400px;
}

.box {
  width: 150px;
}

select {
  width: 100%;
  height: 150px;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

button {
  margin: 5px;
}
</style>